<button commandfor="mydialog" command="show-modal">Show modal dialog</button>
<dialog id="mydialog">
  <button commandfor="mydialog" command="close">Close</button>
  Dialog Content
</dialog>

element.addEventListener("command", (event) => {
  if (event.command == "--rotate-left") {
    element.style.rotate = "-90deg";
  } else if (event.command == "--rotate-right") {
    element.style.rotate = "90deg";
  }
});

element.when("click").subscribe({
  next: () => {
    console.log("clicked");
  },
});

element
  .when("mousemove")
  .takeUntil(document.when("mouseup"))
  .subscribe({
    next: (e) => {
      console.log("mousemoved", e);
    },
  });

const maxY = await element
  .when("mousemove")
  .takeUntil(element.when("mouseup"))
  .map((e) => e.clientY)
  .reduce((soFar, y) => Math.max(soFar, y), 0);

.example {
  width: 100px;
  height: 100px;
  background-color: coral;
  clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close);
}

.anchor {
  anchor-name: --anchor-el;
}
/* インセット領域を利用した配置 */
.anchored-notice-1 {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of anchored elem at top center of anchor  */
  /* top, left, right, bottom, inline-(start|end), block-(start|end) */
  inset-area: top;
}
/* 絶対配置を利用した配置 */
.anchord-notice-2 {
  position: absolute;
  /*  Anchor reference  */
  position-anchor: --anchor-el;
  /*  Position bottom of positioned elem at top of anchor  */
  bottom: anchor(top);
  right: anchor(right);
  /*  Center justification to the anchor */
  justify-self: anchor-center;
}
.anchord-notice-3 {
  position: absolute;
  position-anchor: --anchor-el;
  inset-area: right span-bottom;
  /*
  * 配置位置をアンカーの位置に応じて変更する。
  */
  position-try-options: --bottom;
}
/* alternate position */
@position-try --bottom {
  inset-area: bottom;
}
.anchord-notice-4 {
  position: absolute;
  position-anchor: --anchor-el;
  inset-area: top;
  /* 自動的に反転させる flip-blockとflip-inlineの組み合わせ*/
  position-try-options: flip-block;
}
.anchord-notice-5 {
  position: fixed;
  position-anchor: --anchor-el;
  /* アンカーが表示されている間、配置された要素を表示し続ける */
  position-visibility: anchors-visible;
  bottom: anchor(top);
}

function callback(records) {
  const lastRecord = records[records.length - 1];
  console.log(`Current pressure ${lastRecord.state}`);
  if (lastRecord.state === "critical") {
    // disable video feeds
  } else if (lastRecord.state === "serious") {
    // disable video filter effects
  } else {
    // enable all video feeds and filter effects
  }
}

const observer = new PressureObserver(callback);
await observer.observe("cpu", {
  sampleInterval: 1000, // 1000ms
});

/* Math.round相当。デフォルトはnearest */
width: round(var(--width), 50px);
/* Math.ceil相当 */
width: round(up, 101px, var(--interval));
/* Math.floor相当 */
width: round(down, var(--height), var(--interval));
/* Math.tranc相当 */
margin: round(to-zero, -105px, 10px);
margin: mod(29vmin, 6vmin); /* 5vmin */
rotate: mod(135deg, -90deg); /* -45deg */
line-height: rem(21, 2); /* 1 */
rotate: rem(140deg, -90deg); /* 50deg */